import React from 'react'
import { NavLink, Outlet } from "react-router-dom"
import { Tabbar } from 'react-vant';
import { mainRouter } from '../router/RouterConfig';
function Index() {
    return (
        <div className='box'>

            <header>
                <div className="top">
                      <input type="text" placeholder='搜索内容'/>
                </div>
              
            </header>
            <main>
                <Outlet></Outlet>
            </main>
            <footer>
                <Tabbar>
                    {
                        mainRouter.map((item, index) => {
                            return <Tabbar.Item key={index} icon={item.icon}>
                                <NavLink to={item.path}>{item.title}</NavLink>
                            </Tabbar.Item>
                        })
                    }


                </Tabbar>
            </footer>

        </div>
    )
}

export default Index